<template>
	<view class="app">
		<authorize @onLoadFun="onLoadFun" isGoIndex></authorize>
		<mescroll-body ref="mescrollUni" @init="mescrollInit" class="app-mescroll" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback">
			<view class="app-container">
				<view class="coupon-wrap">
					<view class="coupon-card cu-card case bg-white margin-bottom" v-for="(item, index) in list" :key="index" :index="index">
						<view class="side">
							<!-- is_common 是否全场通用，0为否，1为是 -->
							<image v-if="item.is_common" src="../static/img/coupon/COUPON.png" style="height: 150px"></image>
							<image v-else src="../static/img/coupon/FULLCOUPON.png" style="height: 150px"></image>
						</view>
						<view class="content">
							<view class="introduction padding" :style="{borderColor: item.is_common ? '#172575' : '#A5C3F7'}">
								<view class="left-wrap">
									<view class="text-bold">{{ item.type === 0 ? 'FULL COUPON' : 'LIMITED COUPON' }}</view>
									<!-- 判断优惠券类型 1:折扣 -->
									<view class="block" v-if="item.type">
										<text class="sign">￥</text>
										<text class="price">{{ item.discount || 8.8 }}</text>
										<text class="sub">折</text>
									</view>
									<!-- 判断优惠券类型 0:立减 -->
									<view class="block" v-else>
										<text class="sign">￥</text>
										<text class="price">{{ item.subtract_price || 8.8 }}</text>
										<text class="sub">立减</text>
									</view>
								</view>
								<view class="details">
									<view>{{item.is_common ? '全平台通用优惠券' : '仅限'+ item.area_name +'使用'}}</view>
									
								</view>
								<view class="text-gray text">{{ item.full_price > 0 ? `订单满${item.full_price}元使用` : '无门槛优惠券' }}</view>
							</view>
							<view class="range text-gray">
								<text class="padding-sm">使用时间: {{ item.commencement_date }} ~ {{ item.expiry_date }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { getWechatUserDiscountCouponInfoList } from '@/api/common.js';
import authorize from '@/components/authorize/authorize';
export default {
	mixins: [MescrollMixin],
	components: {
		MescrollBody,
		authorize
	},
	data() {
		return {
			downOption: {
				auto: false, //是否在初始化后,自动执行下拉回调callback; 默认true
				native: true // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效
			},
			// 上拉加载的常用配置
			upOption: {
				use: true, // 是否启用上拉加载; 默认true
				auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true,
				empty: {
					icon: "/static/img/noCoupon.png"
				}
			},
			list: []
		};
	},
	methods: {
		onLoadFun() {
			this.mescroll.resetUpScroll();
		},
		/**
		 * 下拉刷新的回调
		 * @param {Object} mescroll
		 */
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		/**
		 * 上拉加载的回调
		 * @param {num} 页码, 默认从1开始
		 * @param {size} 页长, 默认每页10条
		 */
		upCallback(page) {
			const { num, size } = page;
			this.initialize({
				pageSize: size,
				currentPage: num,
				type: 1
			})
				.then(result => {
					if (num == 1) this.list = [];
					this.list = this.list.concat(result.showing);
					this.mescroll.endBySize(result.showing.length, result.total);
				})
				.catch(err => {
					// 失败隐藏下拉加载状态
					this.mescroll.endErr();
				});
		},
		/**
		 * 查询用户优惠券信息列表
		 */
		initialize({ pageSize, currentPage }) {
			return new Promise((resolve, reject) => {
				getWechatUserDiscountCouponInfoList({
					type: 1,
					pageSize: pageSize,
					currentPage: currentPage
				})
					.then(res => {
						resolve(res.result);
					})
					.catch(err => {
						reject(err);
					});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.coupon-card {
	box-shadow: 7px 3px 15px 0px rgba(212, 212, 211, 0.54);
	border-radius: 10px;

	.side {
		float: left;
		width: 3%;
		height: 150px;
	}

	.content {
		float: left;
		width: 97%;
		height: 150px;

		.introduction {
			height: 114px;
			border-bottom: 2px dotted #172575;
			position: relative;	
			.left-wrap {
				width: 60%;
				float: left;

				.price {
					font-size: 100rpx;
					margin-right: 10rpx;
					line-height: 130rpx;
					font-weight: 600;
				}
				.sign {
					font-size: 50rpx;
					font-weight: 600;
					margin-left: -9px;
				}
				.sub {
					font-size: 32rpx;
					position: relative;
					top: -10rpx;
				}
			}

			.details {
				text-align: right;
				position: relative;
				float: left;
				width: 40%;
			}
			.text {
				position: absolute;
				bottom: 30rpx;
				right: 30rpx;
			}
		}

		.range {
			height: 34px;
			line-height: 34px;
		}
	}
}
</style>
